<template>
  <div>
    <div class="children_content">
      <div class="children_content_flex">
        <div class="left_box">
          <organ-tree ref="organRef" @selected="treeSelected" />
        </div>
        <!-- <searchGroup v-model="searchObj" :options="searchOptions" @search="searchChange"
        @getHeight="setHeight" /> -->

        <div class="right_box">
          <div class="add_btns_box">
            <div class="box_left">
              <div class="title">全部模型</div>
            </div>
            <div class="box_right">
              <Space>
                <template v-if="currentTypeData && currentTypeData.id">
                  <Button type="primary" @click="editType">编辑分类</Button>
                  <Button type="error" @click="deleteType">删除分类</Button>
                </template>
                <Button type="primary">导入模型</Button>
                <Button type="primary">导出选中结果</Button>
                <Button type="primary">批量发布</Button>
                <Button type="primary">批量发布(版本号不变)</Button>
                <Button type="primary" @click="handleEdit()">新建模型</Button>
              </Space>
            </div>
          </div>

          <div class="content_table">
            <TemplateTable ref="tableRef" :data="tableData" :columns="tableColumns"
              :loading="loading" :height="tableHeight" :page="pageIndex" :page-size="pageSize"
              :total="total" border="none" size="small" stripe @page-change="handlePageChange">
            </TemplateTable>
          </div>

        </div>
      </div>
    </div>

    <EditDialog ref="editDialogRef" v-if="showDialog" :currentTypeData="currentTypeData" @cancel="handleDialogCancel"
      @submit="handleDialogSubmit" />

    <ReleaseDialog ref="releaseDialogRef" v-if="releaseDialogDisplay" @submit="releaseSuccess" @cancel="releaseDialogDisplay = false" />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, inject, watch, nextTick, computed } from 'vue'
import { Message } from 'view-ui-plus'
import moment from 'moment'

import { dataSource, modelManage } from '@/api/modules/modelSetting'

import OrganTree from './components/OrganTree.vue'
import EditDialog from './components/EditDialog.vue'
import ReleaseDialog from './components/ReleaseDialog.vue'
import TemplateTable from '@/components/TemplateTable/index.vue'

// 屏幕高度
const screenHeight = inject('screenHeight')
// 搜索组件高度
const searchHeight = ref(null)
// 表格高度
const tableHeight = ref(0)
// 监听 screenHeight 的变化
watch(
  screenHeight,
  newHeight => {
    if (searchHeight.value) {
      tableHeight.value = newHeight - searchHeight.value - 235
    } else {
      tableHeight.value = newHeight - 235
    }
  },
  { immediate: true }
)

// 是否显示对话框
const showDialog = ref(false)
const editDialogRef = ref(null)

// 当前对象
const { proxy } = getCurrentInstance()

// 搜索条件字段
const searchObj = ref({
  name: '',
  type: '',
  dataSource: ''
})

const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)

// 列表数据
const tableData = ref([])
const organRef = ref(null)

// 加载状态
const loading = ref(false)

// 表格列配置
const tableColumns = computed(() => [
  { title: '名称', field: 'name', minWidth: 120 },
  { title: '版本', field: 'dataversion', minWidth: 140 },
  { title: '结算情况', field: 'account', minWidth: 140 },
  { title: '计划', field: 'account', minWidth: 140 },
  { title: '执行状态', field: 'account', minWidth: 140 },
  {
    title: '创建时间',
    field: 'createTime',
    minWidth: 140,
    formatter: ({ cellValue }) => moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '操作',
    type: 'action',
    width: 320,
    fixed: 'right',
    actions: [
      {
        text: '编辑',
        onClick: row => handleEdit(row.id)
      },
      {
        text: '发布',
        type: null,
        onClick: row => handleRelease(row.id) 
      },
      {
        text: '结算配置',
        type: null,
        onClick: row => {}
      },
      {
        text: '结算任务',
        type: null,
        onClick: row => {}
      },
      
      {
        text: '删除',
        type: 'del',
        onClick: row => handleDelete(row)
      }
    ]
  }
])

// 批量删除
const batchDel = () => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否批量删除选中数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      Message.success('批量删除成功')
      getPageData(true)
    }
  })
}

const handleEdit = id => {
  showDialog.value = true
  nextTick(() => {
    editDialogRef.value.initDialog(id)
  })
}

const currentTypeData = ref(null)
const treeSelected = (data) => {
  currentTypeData.value = data
  getPageData(true)
}

const handleDelete = row => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await modelManage.delete({
        data: {
          id: row.id
        }
      })
      Message.success('删除成功')
      getPageData(true)
    }
  })
}

const releaseSuccess = () => {
  releaseDialogDisplay.value = false

  getPageData()
}

// 处理对话框取消
const handleDialogCancel = () => {
  showDialog.value = false
}

// 处理对话框提交
const handleDialogSubmit = () => {
  showDialog.value = false
  // 刷新数据列表
  getPageData(true)
}

// 获取数据源列表
const getPageData = reset => {
  if (reset) {
    pageIndex.value = 1
  }

  loading.value = true

  modelManage
    .page({
      query: {
        p: pageIndex.value,
        ps: pageSize
      },
      data: {
        typeid: currentTypeData.value?.id
      }
    })
    .then(({ data }) => {
      tableData.value = data?.content || []
      total.value = data?.totalElements || 0
    })
    .finally(() => {
      loading.value = false
    })
}

// 处理页码变化
const handlePageChange = page => {
  pageIndex.value = page
  getPageData()
}

const editType = () => {
  organRef.value.handleCreateType(currentTypeData.value.id)
}

const deleteType = () => {
  organRef.value.handleDeleteType(currentTypeData.value.id)
}

const releaseDialogDisplay = ref(false)
const releaseDialogRef = ref(null)
const handleRelease = (id) => {
  releaseDialogDisplay.value = true

  nextTick(()=>{
    releaseDialogRef.value.initDialog(id)
  })
}

// 获取组件高度
const setHeight = height => {
  searchHeight.value = height
  tableHeight.value = screenHeight.value - searchHeight.value - 245
}
</script>

<style lang="scss" scoped></style>